<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="./css/register.css">

    <script>
        window.onload = function () {
            /*
            分析：
                1.给表单绑定onsubmit事件，监听器中判断每一个方法检验的结果
                    如果都为true，则返回true
                    如果有一个false，则返回false
                2.定义一些方法检验各个表单项
                3.给各个表单绑定失去焦点onblur事件
             */

            var id_form = document.getElementById("form");
            id_form.onsubmit = function () {
                return checkUserName() && checkPsw() && checkEmail() && checkPhone() && checkName();
            }


            //给用户名，密码，邮箱，手机号绑定失去焦点时的事件
            document.getElementById("username").onblur = checkUserName;

            document.getElementById("password").onblur = checkPsw;

            document.getElementById("Email").onblur = checkEmail;

            document.getElementById("name").onblur = checkName;

            document.getElementById("phone").onblur = checkPhone;

            //检验用户名
            function checkUserName() {
                var username = document.getElementById("username").value;
                var reg = /[A-Za-z_0-9]{5,19}/;
                var check_username = document.getElementById("check_username");
                if (reg.test(username)) {
                    check_username.innerHTML = "<img src='./img/right_2.png'>";
                } else {
                    check_username.innerText = "格式错误";
                    check_username.className = "error";
                }
                return reg.test(username);
            }

            //检验密码
            function checkPsw() {
                var psw = document.getElementById("password").value;
                var reg = /[A-Za-z_0-9]{5,19}/;
                var check_psw = document.getElementById("check_psw");
                if (reg.test(psw)) {
                    check_psw.innerHTML = "<img src='./img/right_2.png'>";
                } else {
                    check_psw.innerText = "格式错误";
                    check_psw.className = "error";
                }
                return reg.test(psw);
            }

            //检验邮箱
            function checkEmail() {
                var email = document.getElementById("Email").value;
                var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
                var check_email = document.getElementById("check_email");
                if (reg.test(email)) {
                    check_email.innerHTML = "<img src='./img/right_2.png'>";
                } else {
                    check_email.innerText = "格式错误";
                    check_email.className = "error";
                }
                return reg.test(email);
            }

            //检验姓名
            function checkName() {
                var name = document.getElementById("name").value;
                var reg = /^[\u4E00-\u9FA5]{1,4}$/;
                var check_name = document.getElementById("check_name");
                if (reg.test(name)) {
                    check_name.innerHTML = "<img src='./img/right_2.png'>";
                } else {
                    check_name.innerText = "格式错误";
                    check_name.className = "error";
                }
                return reg.test(name);
            }

            //检验手机号
            function checkPhone() {
                var phone = document.getElementById("phone").value;
                var reg = /^[1]([3-9])[0-9]{9}$/;
                var check_phone = document.getElementById("check_phone");
                if (reg.test(phone)) {
                    check_phone.innerHTML = "<img src='./img/right_2.png'>";
                } else {
                    check_phone.innerText = "格式错误";
                    check_phone.className = "error";
                }
                return reg.test(phone);
            }

            //点击换验证码
            var code = document.getElementById("img_code");
               code.onclick=function () {
                    //加时间戳以便能切换验证码
                   var date=new Date().getTime();
                       code.src="/综合案例/checkCode?"+date;
               }
        }
    </script>

</head>
<body>

<div class="big_div">

    <div class="left_div">
        <p class="rg_p">新用户注册</p>
        <p class="rg_p2">USER REGISTER</p>

    </div>

    <div class="center_div">
        <div class="form_div">
            <table>
                <form action="/综合案例/registerServlet" method="post" id="form">
                    <tr>
                        <td class="td_left">
                            <label for="username">用户名</label>
                        </td>
                        <td class="td_right"><input type="text" placeholder="请输入账号" name="username" id="username">
                            <span id="check_username" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="password">密码</label>
                        </td>
                        <td class="td_right"><input type="password" placeholder="请输入密码" name="password" id="password">
                            <span id="check_psw" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="Email">Email</label>
                        </td>
                        <td class="td_right"><input type="email" placeholder="请输入Email" name="email" id="Email">
                            <span id="check_email" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="name">姓名</label>
                        </td>
                        <td class="td_right"><input type="text" placeholder="请输入真实姓名" name="relname" id="name">
                            <span id="check_name" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="phone">手机号</label>
                        </td>
                        <td class="td_right"><input type="number" placeholder="请输入您的手机号" name="phone" id="phone">
                            <span id="check_phone" class="error"></span>
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            性别
                        </td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="男" checked="checked">男
                            <input type="radio" name="gender" value="女">女
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="birthday">出生日期</label>
                        </td>
                        <td class="td_right">
                            <input type="date" name="birthday" id="birthday">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_left">
                            <label for="code">验证码</label>
                        </td>
                        <td class="td_right">
                            <input type="text" name="code" id="code">
                            <img src="/综合案例/checkCode" id="img_code"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <input type="submit" value="注册" id="submit">
                        </td>
                    </tr>
                </form>
            </table>
        </div>
    </div>

    <div class="right_div">
        <P class="rg_p3">已有帐号 ？<a href="login.html">立即登录</a></P>
    </div>

</div>


</body>
</html>